// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'vars/lib' as *;

.m24-c-showcase-title {
    font-size: $text-title-xl;
    margin-bottom: $spacer-sm;
}

.m24-c-showcase-subtitle {
    font-size: $text-button-xl;
    padding: $spacer-xs 0;
    text-align: end;
}

.m24-c-showcase-body {
    font-weight: 500;
    font-size: $text-body-lg;

    @media #{$mq-xl} {
        max-width: grid(6);
    }
}

.m24-c-showcase-media {
    text-align: center;
    padding: $spacer-xl 0;
    position: relative;

    &.m24-t-media-two .m24-c-showcase-image {
        margin: 0 calc($grid-gutter / 2) calc($grid-gutter / 2);
    }

    &.m24-t-media-three {
        height: 180px;
        margin-bottom: $spacer-lg;

        .m24-c-showcase-image {
            width: 180px;
            position: absolute;
            left: 50%;
            margin-left: -90px;

            &.image-one {
                transform: translate(60px, 30px);
            }

            &.image-two {
                transform: translate(-60px, 0);
            }

            &.image-three {
                transform: translate(0, -30px);
            }
        }
    }
}

@media #{$mq-sm} {
    .m24-c-showcase-media.m24-t-media-three {
        height: 240px;

        .m24-c-showcase-image {
            width: 240px;
            position: absolute;
            left: 50%;
            margin-left: -120px;

            &.image-one {
                transform: translate(80px, $spacer-xl);
            }

            &.image-two {
                transform: translate(-80px, 0);
            }

            &.image-three {
                transform: translate(0, calc($spacer-xl * -1));
            }
        }
    }
}

@media #{$mq-md} {
    .m24-c-showcase-media.m24-t-media-three {
        height: 360px;

        .m24-c-showcase-image {
            width: 360px;
            position: absolute;
            left: 50%;
            margin-left: -180px;

            &.image-one {
                transform: translate(160px, $spacer-xl);
            }

            &.image-two {
                transform: translate(-160px, 0);
            }

            &.image-three {
                transform: translate(0, calc($spacer-xl * -1));
            }
        }
    }
}

@media #{$mq-lg} {
    .m24-c-showcase-text.m24-l-two-columns {
        @include grid;

        .m24-c-showcase-title,
        .m24-c-showcase-subtitle {
            grid-column: 1/7;
            text-align: start;
        }

        .m24-c-showcase-body {
            grid-column: 7/-1;
            max-width: none;
        }
    }

    .m24-c-showcase-foot {
        @include grid;

        .m24-c-showcase-foot-content {
            grid-column: 1/7;
        }

        .m24-c-section-cta {
            grid-column: 7/-1;
        }
    }
}

@media #{$mq-lg} and (prefers-reduced-motion: no-preference) {
    .m24-c-showcase-media.m24-t-media-three {
        .m24-c-showcase-image {
            transition:
                transform 300ms 500ms cubic-bezier(.5,0,0,1),
                left 300ms 500ms cubic-bezier(.5,0,0,1),
                margin-left 300ms 500ms cubic-bezier(.5,0,0,1);
        }

        &:hover {
            .m24-c-showcase-image {
                &.image-one {
                    transform: translate(0, -60px);
                    left: 100%;
                    margin-left: -360px;
                }

                &.image-two {
                    transform: translate(0, -60px);
                    left: 0;
                    margin-left: 0;
                }

                &.image-three {
                    transform: translate(0, 60px);
                }
            }
        }
    }
}
